<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch">
      <el-form-item label="政策:" prop="pid">
        <el-select size="mini" v-model="queryParams.pid" @change="getList">
          <el-option
            v-for="item in policyList"
            :key="item.id"
            :label="item.title"
            :value="item.id"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="相关政策名称:" prop="itemName">
        <el-input
          size="mini"
          v-model="queryParams.itemName"
          placeholder="请输入相关政策名称"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>
    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="primary"
          plain
          icon="el-icon-plus"
          size="mini"
          @click="handleAdd"
          v-hasPermi="['system:policyItem:add']"
        >新增政策细则
        </el-button>
      </el-col>
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>
    <el-table v-loading="loading" :data="dataList">
      <el-table-column label="政策类别" :show-overflow-tooltip="true" key="policyName" align="center">
        <template slot-scope="scope">
          <router-link :to="'/triones/policy/release'" class="link-type">
            <span>{{ scope.row.policyName }}</span>
          </router-link>
        </template>
      </el-table-column>
      <el-table-column label="相关政策标题" :show-overflow-tooltip="true" prop="itemName" key="itemName" align="center"/>
      <el-table-column label="相关政策副标题" :show-overflow-tooltip="true" prop="subItemName" key="subItemName" align="center"/>
      <el-table-column label="流程图" key="processImg" align="center">
        <template slot-scope="scope">
          <image-preview v-if="scope.row.processImg" class="list-img" :src="scope.row.processImg"/>
          <span v-else>暂无</span>
        </template>
      </el-table-column>
      <el-table-column label="简介" :show-overflow-tooltip="true" prop="synopsis" key="synopsis" align="center"/>
      <el-table-column label="操作" fixed="right" class-name="small-padding fixed-width" align="center" width="200">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            @click="handleEdit(scope.row)"
            v-hasPermi="['system:policyItem:edit']"
          >修改
          </el-button>
          <el-button
            size="mini"
            type="text"
            @click="handleDelete(scope.row)"
            v-hasPermi="['system:policyItem:remove']"
          >删除
          </el-button>
          <el-button
            size="mini"
            type="text"
            @click="goDetail(scope.row)"
            v-hasPermi="['system:policyItem:query']"
          >详情
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />
    <el-dialog :title="title" :visible.sync="open" width="950px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="120px">
        <el-form-item label="政策类别:" prop="pid">
          <el-select v-model="form.pid" clearable style="width: 100%" @focus="getPolicyList">
            <el-option
              v-for="item in policyList"
              :key="item.id"
              :label="item.title"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="相关政策标题:" prop="itemName">
          <el-input v-model="form.itemName" placeholder="请输入相关政策标题"/>
        </el-form-item>
        <el-form-item label="相关政策副标题:" prop="subItemName">
          <el-input v-model="form.subItemName" placeholder="请输入相关政策副标题"/>
        </el-form-item>
        <el-form-item label="简介:" prop="synopsis">
          <el-input type="textarea" v-model="form.synopsis" placeholder="请输入简介"/>
        </el-form-item>
        <el-form-item label="申报流程图:" prop="processImg">
          <ImageUpload v-model="form.processImg" :limit="1"/>
        </el-form-item>
        <el-form-item label="申报流程模板:" prop="declareTemplateId">
          <el-select clearable style="width: 100%" v-model="form.declareTemplateId">
            <el-option label="四上企业申报流程" :value="100"/>
          </el-select>
        </el-form-item>
        <el-form-item label="申报条件:">
          <div class="more-info-box">
            <div>
              <el-table border :data="form.declareCondition" size="mini">
                <el-table-column prop="item" label="条件内容" align="center">
                  <template slot-scope="scope">
                    <el-input
                      v-model.trim="scope.row.item"
                      placeholder="请输入条件内容"
                      clearable>
                    </el-input>
                  </template>
                </el-table-column>
                <el-table-column width="100" label="操作" align="center">
                  <template slot-scope="scope">
                    <el-button
                      type="primary"
                      size="mini"
                      @click="removeDeclareCondition(scope.$index, scope.row)"
                    >删除
                    </el-button>
                  </template>
                </el-table-column>
              </el-table>
            </div>
            <el-button type="primary" style="float: right" size="mini" @click="addDeclareCondition">添加申报条件</el-button>
          </div>
        </el-form-item>
        <el-form-item label="奖励标准:" prop="reward">
          <el-input type="textarea" v-model="form.reward" placeholder="请输入奖励标准"/>
        </el-form-item>
        <el-form-item label="申报资料清单:">
          <div class="more-info-box">
            <div>
              <el-table border :data="form.informationList" size="mini">
                <el-table-column prop="name" label="资料名称" align="center">
                  <template slot-scope="scope">
                    <el-input
                      v-model.trim="scope.row.name"
                      placeholder="请输入资料名称"
                      clearable>
                    </el-input>
                  </template>
                </el-table-column>
                <el-table-column prop="name" label="资料模板" align="center">
                  <template slot-scope="scope">
                    <custom-file-upload :limit="1" v-model="scope.row.files"/>
                  </template>
                </el-table-column>
                <el-table-column width="100" label="操作" align="center">
                  <template slot-scope="scope">
                    <el-button
                      type="primary"
                      size="mini"
                      @click="removeInformationList(scope.$index, scope.row)"
                    >删除
                    </el-button>
                  </template>
                </el-table-column>
              </el-table>
            </div>
            <el-button type="primary" style="float: right" size="mini" @click="addInformationList">添加清单</el-button>
          </div>
        </el-form-item>
        <el-form-item label="申报时间节点:">
          <div class="more-info-box">
            <div>
              <el-table border :data="form.timeNode" size="mini">
                <el-table-column prop="name" label="时间节点" align="center">
                  <template slot-scope="scope">
                    <el-input
                      v-model.trim="scope.row.item"
                      placeholder="请输入申报时间节点"
                      clearable>
                    </el-input>
                  </template>
                </el-table-column>
                <el-table-column width="100" label="操作" align="center">
                  <template slot-scope="scope">
                    <el-button
                      type="primary"
                      size="mini"
                      @click="removeTimeNode(scope.$index, scope.row)"
                    >删除
                    </el-button>
                  </template>
                </el-table-column>
              </el-table>
            </div>
            <el-button type="primary" style="float: right" size="mini" @click="addTimeNode">添加时间节点</el-button>
          </div>
        </el-form-item>
        <el-form-item label="申报入口:">
          <div class="more-info-box">
            <div>
              <el-table border :data="form.declarationEntrance" size="mini">
<!--                <el-table-column prop="type" label="入口类型" align="center" width="140">-->
<!--                  <template slot-scope="scope">-->
<!--                    <el-select v-model="scope.row.type">-->
<!--                      <el-option label="地址信息" value="地址信息" />-->
<!--                      <el-option label="应用程序" value="应用程序" />-->
<!--                      <el-option label="网站链接" value="网站链接" />-->
<!--                      <el-option label="其他信息" value="其他信息" />-->
<!--                    </el-select>-->
<!--                  </template>-->
<!--                </el-table-column>-->
                <el-table-column prop="content" label="入口信息" align="center">
                  <template slot-scope="scope">
                    <el-input
                      v-model.trim="scope.row.content"
                      placeholder="请输入入口信息"
                      clearable>
                    </el-input>
                  </template>
                </el-table-column>
                <el-table-column width="100" label="操作" align="center">
                  <template slot-scope="scope">
                    <el-button
                      type="primary"
                      size="mini"
                      @click="removeDeclarationEntrance(scope.$index, scope.row)"
                    >删除
                    </el-button>
                  </template>
                </el-table-column>
              </el-table>
            </div>
            <el-button type="primary" style="float: right" size="mini" @click="addDeclarationEntrance">添加申报入口</el-button>
          </div>
        </el-form-item>
        <el-form-item label="兑现方式:" prop="cashWay">
          <el-input v-model="form.cashWay" placeholder="请输入兑现方式"/>
        </el-form-item>
        <el-form-item label="责任单位:" prop="responsibilityAgency">
          <el-input v-model="form.responsibilityAgency" placeholder="请输入责任单位"/>
        </el-form-item>
        <el-form-item label="分管领导:" prop="responsibleLeader">
          <el-input v-model="form.responsibleLeader" placeholder="请输入分管领导"/>
        </el-form-item>
        <el-form-item label="责任科室:" prop="responsibilityDept">
          <el-input v-model="form.responsibilityDept" placeholder="请输入责任科室"/>
        </el-form-item>
        <el-form-item label="联系人:" prop="liaison">
          <el-input v-model="form.liaison" placeholder="请输入联系人"/>
        </el-form-item>
        <el-form-item label="联系电话:" prop="contactsTel">
          <el-input v-model="form.contactsTel" placeholder="请输入联系电话"/>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="open = false">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import {list, itemPageList, addItem, editItem, getItemInfo, removeItem } from '@/api/triones/policy'
export default {
  name: 'index',
  dicts: ['policy_item_type'],
  data() {
    return {
      loading: true,
      showSearch: true,
      policyList: [],
      dataList: [],
      total: 0,
      queryParams: {
        pageNum: 1,
        pageSize: 10
      },
      title: '',
      open: false,
      form: {},
      rules: {
        pid: [
          { required: true, message: "请选择政策", trigger: "blur" }
        ],
        itemName: [
          { required: true, message: "请输入细则名称", trigger: "blur" }
        ]
      }
    }
  },
  created() {
    this.getList();
    this.getPolicyList();
  },
  methods: {
    getList() {
      this.loading = true;
      itemPageList(this.queryParams).then(response => {
        this.dataList = response.rows;
        this.total = response.total;
        this.loading = false;
      })
    },
    getPolicyList() {
      list().then(res => {
        this.policyList = res.data;
      })
    },
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    handleAdd() {
      this.reset();
      this.open = true;
      this.title = "新增政策细则";
    },
    reset() {
      this.form = {
        id: undefined,
        pid: undefined,
        itemName: undefined,
        subItemName: undefined,
        processImg: undefined,
        informationList: [],
        timeNode: [],
        synopsis: undefined,
        declareCondition: [],
        reward: undefined,
        declarationEntrance: [],
        cashWay: undefined,
        responsibilityAgency: undefined,
        responsibleLeader: undefined,
        responsibilityDept: undefined,
        liaison: undefined,
        contactsTel: undefined,
        declareTemplateId: undefined
      };
      this.resetForm("form");
    },
    /*************************************************************************/
    addDeclareCondition() {
      var _this = this
      let list = {
        item: ''
      }
      _this.form.declareCondition.push(list)
    },
    removeDeclareCondition(index, row) {
      var _this = this
      _this.form.declareCondition.splice(index, 1)
    },
    /*************************************************************************/
    addInformationList() {
      var _this = this
      let list = {
        name: '',
        files: undefined
      }
      _this.form.informationList.push(list)
    },
    removeInformationList(index, row) {
      var _this = this
      _this.form.informationList.splice(index, 1)
    },
    /*************************************************************************/
    addTimeNode() {
      var _this = this
      let list = {
        item: ''
      }
      _this.form.timeNode.push(list)
    },
    removeTimeNode(index, row) {
      var _this = this
      _this.form.timeNode.splice(index, 1)
    },
    /*************************************************************************/
    addDeclarationEntrance() {
      var _this = this
      let list = {
        content: ''
      }
      _this.form.declarationEntrance.push(list)
    },
    removeDeclarationEntrance(index, row) {
      var _this = this
      _this.form.declarationEntrance.splice(index, 1)
    },
    /*************************************************************************/
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          this.form.informationList = JSON.stringify(this.form.informationList);
          this.form.timeNode = JSON.stringify(this.form.timeNode);
          this.form.declareCondition = JSON.stringify(this.form.declareCondition);
          this.form.declarationEntrance = JSON.stringify(this.form.declarationEntrance);
          this.open = true;
          if (this.form.id != null) {
            editItem(this.form).then(response => {
              this.$modal.msgSuccess("修改成功");
              this.open = false;
              this.getList();
            });
          } else {
            addItem(this.form).then(response => {
              this.$modal.msgSuccess("新增成功");
              this.open = false;
              this.getList();
            });
          }
        }
      });
    },
    handleEdit(row) {
      this.reset();
      const id = row.id;
      this.getPolicyList();
      getItemInfo(id).then(res => {
        this.form = res.data;
        if (res.data.informationList) {
          this.form.informationList = JSON.parse(res.data.informationList);
        } else {
          this.form.informationList = [];
        }
        if (res.data.timeNode) {
          this.form.timeNode = JSON.parse(res.data.timeNode);
        } else {
          this.form.timeNode = [];
        }
        if (res.data.declareCondition) {
          this.form.declareCondition = JSON.parse(res.data.declareCondition);
        } else {
          this.form.informationList = [];
        }
        if (res.data.declarationEntrance) {
          this.form.declarationEntrance = JSON.parse(res.data.declarationEntrance);
        } else {
          this.form.declarationEntrance = [];
        }
        this.title = '修改政策细则';
        this.open = true;
      })
    },
    handleDelete(row) {
      const id = row.id;
      this.$modal.confirm('是否确认删除政策细则名称为"' + row.itemName + '"的数据项？').then(() => {
        this.loading = true;
        return removeItem(id);
      }).then(() => {
        this.loading = false;
        this.getList();
        this.$modal.msgSuccess("删除成功");
      }).finally(() => {
        this.loading = false;
      });
    }
  }
}
</script>
<style scoped lang="scss">
.more-info-box {
  padding-bottom: 20px;
}
</style>
